<template>
	<view class="observe-content">
		<image style="height: 200px; width: 100vw;  position: fixed;" src="/static/icons/bg_emp.png" />
		<view class="observe-body">
			<view style="height: 30px; width: 100%; position: absolute; display: flex; align-items: center;">
				<image style="height: 30px; width: 30px;" src="/static/icons/home.png"></image>
				<view style="margin-left: 10px; display: flex; align-items: center;width: 100%;"
					@click="showDrawer('showLeft')">
					<view style="position: relative;">{{ nickname || "未知"}}</view>
					<image style="height: 20px; width: 20px;" src="/static/icons/arrow.svg"></image>
				</view>

			</view>
			<view class="card bgNum1" style="border-radius: 15px; margin-top: 40px;">
				<view class="title" style="display: flex;  justify-content: space-between; flex-direction: row;">
					<view style="margin:15px 0px 0px 15px;flex: 3;">
						<text>累计广告值</text>
					</view>
				</view>
				<view style="padding: 10px;">
					<view class="content"
						style="height: auto;  display: flex; align-items: center; justify-content: left;">
						<image style="height: 70px; width: 70px;" src="/static/icons/icon_login_mark.png"></image>
						<view class="" style="margin-left: 10px;">
							<view>
								<text class="num">{{total_income}}</text>
								<text class="unit">元</text>
							</view>
							<text style="color: #999999;">数据截至昨日</text>
						</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="bg">
					<view class="title">
						<text>昨日广告值</text>
					</view>

					<view class="content">
						<text class="num">{{yesterday_income}}</text>
						<text class="unit">元</text>
					</view>
					<image class="icon" mode="widthFix" src="/static/icons/icon_emp_mask1.png" />
				</view>
			</view>
			<view class="card">
				<view class="bg">
					<view class="title">
						<text>累计用户</text>
					</view>

					<view class="content">
						<view style="flex: 1; text-align: center;">
							<view>
								<text class="num">{{push_num}}</text>
								<text class="unit">人</text>
							</view>
							<view>直推用户</view>
						</view>
						<view style="flex: 1; text-align: center;">
							<view>
								<text class="num">{{no_push_num}}</text>
								<text class="unit">人</text>
							</view>
							<view>间推用户</view>
						</view>
					</view>
					<image class="icon" mode="widthFix" src="../../static/icons/icon_emp_mask2.png" />
				</view>
			</view>
			<view class="card">
				<view class="bg">
					<view class="title">
						<text>当月广告值</text>
					</view>

					<view class="content">
						<text class="num">{{month_income}}</text>
						<text class="unit">元</text>
					</view>
					<image class="icon" mode="widthFix" src="../../static/icons/icon_emp_mask3.png" />
				</view>
			</view>
			<view class="card">
				<view class="bg" style="padding: 20px 20px 5px 20px;">
					<view style="display: flex; justify-content: space-between;">
						<view class="title">
							<text>明细展示</text>
						</view>
						<view class="title">
							<view class="select-date fr" @click="selectDate">
								<view class="f32 bold">{{ nowYear }}</view>
							</view>
						</view>
					</view>
					<view style="height: auto;" @click="onClickDataInfo">
						<view style="position: relative;">
							<image class="bg_content" mode="heightFix" />
							<view class="content" style="position: absolute;
							width: 100%; height: 100%; top: 0px;left: 0px;  
							display: flex; flex-direction: row;">
								<view
									style="flex: 1; display: flex;flex-direction: column; align-items: center;justify-content: center;">
									<view>
										<image style="height: 20px;width: 20px; top: 3px; margin-right: 5px;"
											src="/static/images/common/icon_add.png" />
										<text class="num">{{s_push_num}}</text>
										<text class="unit">人</text>
									</view>
									<text class="unit">直推用户</text>
								</view>
								<view
									style="flex: 1; display: flex;flex-direction: column; align-items: center;justify-content: center;">
									<view>
										<image style="height: 20px;width: 20px; top: 3px; margin-right: 5px;"
											src="/static/images/common/icon_gold.png" />
										<text class="num">{{s_no_push_num}}</text>
										<text class="unit">人</text>
									</view>
									<text class="unit">间推用户</text>
								</view>

							</view>
						</view>

						<view
							style="position: relative; display: flex;flex-direction: column; align-items: center;justify-content: center;">
							<image class="bg_ad_content" mode="heightFix" />
							<view style="position: absolute;">
								<view>
									<image style="height: 20px;width: 20px; top: 3px; margin-right: 5px;"
										src="/static/images/common/icon_gold.png" />
									<text class="unit">￥</text>
									<text class="num">{{income}}</text>
								</view>
								<text class="unit">广告值</text>
							</view>

						</view>
					</view>

				</view>
			</view>
		</view>
		<!-- 左侧抽屉 -->
		<uni-drawer ref="showLeft" mode="left" :width="280" @change="change($event,'showLeft')">
			<view class="close" style="display: flex; flex-direction: column; align-items: center;margin-top: 100px;">
				<view style="display: flex;flex-direction: column; align-items: center;">
					<image src="/static/icons/home.png" style="height: 50px; width: 50px; border-radius: 50%;" />
					<view>{{nickname || "未知"}}</view>
				</view>

				<view class="cell" @click="onClickCell(1)" style="margin-top: 30px;">
					<view class="title">
						<view>推广码</view>
						<view class="arrow ui-arrowright">
							<image class="arrow-right"></image>
						</view>

					</view>
					<view style="width: 100%; height: 1rpx; background-color: #FFF5F5F5;"></view>
				</view>
				<view class="cell" @click="onClickCell(2)">
					<view class="title">
						<view style="flex: 3;">当前版本</view>
						<view style="display: flex;justify-content: center;flex: 2;">
							<view><text>V{{ version || "1.0.0"}}</text></view>
							<view class="arrow ui-arrowright">
								<image class="arrow-right"></image>
							</view>
						</view>


					</view>
					<view style="width: 100%; height: 1rpx; background-color: #FFF5F5F5;"></view>
				</view>
				<view class="cell" @click="onClickCell(3)">
					<view class="title">
						<view>退出登录</view>
						<view class="arrow ui-arrowright">
							<image class="arrow-right"></image>
						</view>

					</view>
					<view style="width: 100%; height: 1rpx; background-color: #FFF5F5F5;"></view>
				</view>

			</view>
		</uni-drawer>
		<uni-load-more v-if="tableList.length > 0" :status="status" :contentText="contentText"></uni-load-more>


		<u-picker :show="selectDateShow" :columns="ageList" keyName="name" title="" round="12"
			:closeOnClickOverlay="true" @cancel="selectDateShow = false" @close="selectDateShow=false"
			@confirm="confirmDate" confirmColor="#58C866"></u-picker>

		<view class="popup">
			<!-- 选择评价的学期时间 -->
			<u-popup :show="select2Day" :safeAreaInsetBottom="false" :round="10" mode="bottom">
				<view style="height: 80rpx; position: relative;">
					<view style="color: #58c866; position: absolute;left: 30rpx;top: 30rpx;"
						@click="select2Day = false">
						取消
					</view>
					<view
						style="display: flex;justify-content: center;align-items: center;height: 80rpx;font: bold;letter-spacing: 3rpx;">
						时间范围
					</view>
					<view style="color: #58c866; position: absolute;right: 30rpx;top: 30rpx;" @click="onClickedDate">
						确定
					</view>
				</view>
				<view style="display: flex;width: 100%;">
					<view style="width: 100%; ">
						<picker-view indicator-style="height: 50px;" v-model="dayday" @change="bindStartDate"
							class="picker-view">
							<picker-view-column>
								<view class="item" v-for="(item,index) in years" :key="index">{{item}}</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in months" :key="index">{{item}}</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in startOfdays" :key="index">{{item}}</view>
							</picker-view-column>
						</picker-view>
					</view>
					<view style="display: flex; justify-content: center; align-items: center; margin: 0rpx 30rpx;">至
					</view>
					<view style="width: 100%;">
						<picker-view indicator-style="height: 50px;" :value="value" @change="bindEndDate"
							class="picker-view">
							<picker-view-column>
								<view class="item" v-for="(item,index) in years" :key="index">{{item}}</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in months" :key="index">{{item}}</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in endOfdays" :key="index">{{item}}</view>
							</picker-view-column>
						</picker-view>
					</view>
				</view>
				<!-- 			<view class="picker-btn">
					<view class="btn" @click="select2Day = false">取消</view>
					<view class="btn confirm" @click="pickerChange">确定</view>
				</view> -->
			</u-popup>
		</view>

		<!-- 筛选时间 -->
		<!-- 	<u-datetime-picker ref="myElement" :show="selectDateShow" v-model="dateDaya" mode="year-month"
			confirmColor="#58C866" @cancel="selectDateShow = false" title="" v-on:confirm="confirmDate"
			v-on:change="changeDate"></u-datetime-picker> -->
		<!-- 添加按钮 -->
		<!-- <view class="add icon-add" @click="handleAddObserve" @touchstart="handleMouseDown"
			@touchmove.stop="handleMouseMove" @touchend="handleMouseUp" :style="{ top: top + 'px', left: left + 'px'}">
		</view> -->
		<!-- 弹框提示 -->
		<rf-toast :show="showWarn" @click="showWarn = false" :isSus="false" :title="errMsg"></rf-toast>

		<!-- 删除该观察记录确认弹窗 -->
		<rf-alert :show="confirmShow" @close="confirmShow=false" @confirm="confirm" title="提示"
			desc="确认删除该观察记录?"></rf-alert>

		<!-- 用户未注册 提示注册 -->
		<rf-alert :show="showRegister" @close="showRegister=false" @confirm="onClickRegister" title="提示" desc="您还未登录"
			confirmText="去登录"></rf-alert>

		<!-- 加载loading -->
		<rf-load :loading="loading" title="加载中..."></rf-load>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState,
	} from 'vuex'; //引入mapState
	import {
		login,
		detail,
		total,
		version
	} from '@/api/sgw.js'

	import {
		observeList,
		delObserve,
		getAiById,
		getReleaseAiByList,
	} from '@/api/observe.js'

	import {
		getEvaluateList
	} from "@/api/eval.js"

	import {
		getTeacherInfo,
	} from '@/api/user.js'

	import {
		getcode,
		getOpenid,
		toLogin,
	} from '@/api/login.js'
	import {
		formatDateYMD,
		formatDateYMDHMS
	} from "@/utils/util.js"

	import {
		zip,
		Observable,
		Subject,
		pipe,
		from,
		observable,
		timer,
		interval,

	} from 'rxjs'

	import {
		retryWhen,
		takeWhile,
		concatMap,
		filter,
		switchMap,
	} from 'rxjs/operators'
	import {
		TRUE
	} from 'sass';
	import monthVue from '../../uni_modules/uview-ui/components/u-calendar/month.vue';



	// 创建两个主题
	const confirmSub = new Subject();
	const changeSub = new Subject();

	// 开始每3秒请求一次
	var source = null;

	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			// for (let i = 1; i <= 31; i++) {
			// 	days.push(i)
			// }

			return {
				navbarHeight: this.navBarHeight,
				screenWidth: this.screenWidth,
				screenHeight: this.screenHeight,
				status: "more",
				contentText: {
					contentdown: "查看更多",
					contentrefresh: "加载中...",
					contentnomore: "没有更多了",
				},
				ageList: [
					[{
						'name': '昨日',
						'value': "1",
					}, {
						'name': '近7日',
						'value': "2",
					}, {
						'name': '近30日',
						'value': "3",
					}, {
						'name': '自定义',
						'value': "4",
					}]
				],
				years,
				months,
				startOfdays: 0, // 开始月份的天数
				endOfdays: 0, // 结束月份的天数

				year,
				month,
				day,

				value: [years.length, month - 1, day - 1], // 设置默认值，分别是年的索引，月的索引，日的索引
				dayday: [years.length, month - 1, day - 1], // 设置默认值，分别是年的索引，月的索引，日的索引

				showDocTimeTitle: "时间范围",



				confirmShow: false, // 删除确认窗口

				dateStr: '',
				week: '',


				nowMonth: '',
				nowDay: '',

				selectDateShow: false,
				assistantShow: false, // ai生成完成提示
				dateDaya: Number(new Date()),
				params: {
					pageSize: 10,
					pageNum: 1,
					year: '',
					month: ''
				},
				tableList: [],
				analyzeBtn: '展开',
				showAll: false,
				allList: [], // 弹出多个孩子的观察，孩子列表
				total: 0,

				dragging: false, // 是否正在拖拽
				mouseX: 0, // 鼠标在元素内的X坐标
				mouseY: 0, // 鼠标在元素内的Y坐标
				left: 0, // 元素左上角距离父容器左侧的距离
				top: 0, // 元素左上角距离父容器顶部的距离


				showWarn: false,
				errMsg: "",
				loading: false, // 加载中提示
				showRegister: false, // 用户未注册提示

				// 删除
				delId: "",
				delIndex: "",

				observe: "", // 分享传参

				currentTabidx: 0,

				shareParams: {
					name: "",
					homePhoto: "",
				},

				is_load: true,

				total_income: 0, // 累计广告收益
				total_user: 0, // 累计用户
				push_num: 0, // 直推用户
				no_push_num: 0, // 间推用户
				yesterday_income: 0, // 昨日广告值
				month_income: 0, // 当月广告值

				//明细展示
				new_user: 0, // 新增用户
				income: 0, // 广告值
				s_push_num: 0, // 直推用户
				s_no_push_num: 0, // 间推用户

				nickname: "",
				nowYear: '昨天',

				select2Day: false,

				startOfTime: "",
				endOfTime: "",

				version: "", // 版本号
			};
		},

		// domStreams: ['confirmM$', 'change$'],
		// observableMethods: {
		// 	confirmM: 'confirmM$',
		// 	change: 'change$'
		// },
		subscriptions() {
			return {

			}
		},
		onTabItemTap(e) {
			// 点击tabbaritem键的触发，常用于刷新
			console.log("onTabItemTap" + JSON.stringify(e));
		},
		created() {

			let that = this
			zip(confirmSub, changeSub).subscribe(([val1, val2]) => {
				// console.log('收到值:', uni.$u.timeFormat(val1.value, 'yyyy mm'));

				/* 	that.params.year = uni.$u.timeFormat(val1.value, 'yyyy')
					that.params.month = uni.$u.timeFormat(val1.value, 'mm')

					that.nowMonth = that.params.month;
					that.nowYear = that.params.year;

					that.params.pageNum = 1

					// 搜索观察
					that.getObserveList() */

			})


			// 获得列表内容。
			// 在列表为空的时候，每个三秒获取一次列表直到获取到数据
			source = timer(0, 3000).pipe(
				concatMap(() => {
					return new Promise((resolve, reject) => {
						// observeList(that.params).then(res => {
						// 	resolve(res)
						// }).catch(err => {
						// 	reject(err)
						// })
					})
				}), // 在每次间隔后发起请求
				retryWhen(errors => errors.pipe(
					// 请求错误的时候，继续请求
					console.log("liset-----------" + JSON.stringify(errors)),
					takeWhile((_, index) => true),
				)),
				takeWhile((data) => {
					// 没有获取到数据，继续请求
					return that.tableList.length < 1;
				}),
			);


			// 订阅源 observable
			source.subscribe({
				next: (res) => {
					console.log('获取列表' + JSON.stringify(res))
					that.tableList = res.data.rows ? res.data.rows : []
				},
				error: (error) => {
					console.log('Error:---' + error)
				},
				complete: () => {
					console.log('Completed after receiving the correct data.')
				},
			})

		},
		computed: {
			...mapState(['userInfo', 'hasLogin']),
			getChildAge() {
				return (val) => {

					for (let i = 0; i < this.ageList[0].length; i++) {
						if (this.ageList[0][i].value == val.childAge) {
							return this.ageList[0][i].name;
						}
					}
				}

			},
		},
		onLoad(options) {


			// this.left = this.screenWidth - 80;
			// this.top = this.screenHeight - 180;

			// const shareId = options.shareId;

			// if (shareId != null && shareId != undefined) {
			// 	uni.setStorageSync("inviter_uuid", shareId)
			// } else {
			// 	uni.setStorageSync("inviter_uuid", "")
			// }

			// this.navbarHeight = this.screenWidth / 750 * 190;
			// this._login()

			let _that = this;
			const user = localStorage.getItem("USER_INFO")
			const userInfo = JSON.parse(user)
			this.nickname = userInfo.nickname
			// if (!_that.hasLogin) {
			// 	_that.tableList = []
			// 	return
			// }
			this._getData()

		},
		mounted() {
			// this.initTime();

			var _that = this;

			uni.$on('shareParams', function(data) {
				_that.observe = data;
				console.log("-----shareParams-----" + JSON.stringify(data));
				_that.shareParams.name = data.name
				if (data.imagesList && data.imagesList[0]) {
					_that.shareParams.homePhoto = data.imagesList[0].url
				} else {
					_that.shareParams.homePhoto = data.imageUrl
				}
			});

		},
		onUnload() {
			uni.$off('shareParams')
		},
		onShow() {
			uni.$emit("onShow", null)
			let _that = this;
			_that.params.pageNum = 1;
			// _that.getObserveList()
		},
		onHide() {
			console.log("--------------onHide----------------");


			// if (this.tableList.length > 0) {
			// 	this.$forceUpdate();
			// 	this.$nextTick(() => {
			// 		console.log("$nextTick");
			// 		this.$refs.collapseView[0].init()
			// 		// this.$refs.collapseItem[0].queryRect()
			// 	})
			// }
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function(res) {
			console.log(res);
			console.log("this.observe: " + JSON.stringify(this.observe));
			if (res.from === 'button') {
				var imgUrl = ""
				if (this.observe.imagesList && this.observe.imagesList[0]) {
					var imgUrl = this.observe.imagesList[0].url
				} else {
					imgUrl = this.observe.imageUrl
				}

				// if (isNaN(imgUrl)) {
				// 	imgUrl = this.observe.headSculpture
				// }
				return {
					title: this.observe.name,
					path: this.observe.path,
					imageUrl: imgUrl, //数据返回的图片数据
					success: function(res) {
						// 转发成功
						console.log(res)
					},
					fail: function(res) {
						// 转发失败
						console.log(res)
					}
				}
			} else { //用户点击右上角3个点分享（小程序端）
				var shareId = this.userInfo.id;
				return {
					title: "邀请好友，获VIP特权",
					path: '/pages/home/home?shareId=' + shareId,
					imageUrl: "https://superta.noboyun.com/static/share/default.png", //数据返回的图片数据
					success: function(res) {
						// 转发成功
						console.log(res)
					},
					fail: function(res) {
						// 转发失败
						console.log(res)
					}
				}

			}
		},
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		},
		methods: {
			...mapMutations(["login", "updateState"]),
			change(event, sta) {

			},
			getDaysInMonth(month, year = new Date().getFullYear()) {
				// 月份从0开始（0-11），所以需要减1
				return new Date(year, month, 0).getDate();
			},
			bindStartDate: function(e) {
				// 开始时间
				const val = e.detail.value

				const startOfyear = this.years[val[0]]
				const startOfmonth = this.months[val[1]]
				this.startOfdays = this.getDaysInMonth(startOfmonth, startOfyear)
				const startOfday = val[2] + 1

				this.startOfTime = `${startOfyear}-${startOfmonth}-${startOfday || 1} ${'00'}:${'00'}:${'00'}`;
			},
			bindEndDate: function(e) {
				// 结束时间
				const val = e.detail.value

				const endOfyear = this.years[val[0]]
				const endOfmonth = this.months[val[1]]
				this.endOfdays = this.getDaysInMonth(endOfmonth, endOfyear)

				const endOfday = val[2] + 1

				this.endOfTime = `${endOfyear}-${endOfmonth}-${endOfday || 1} ${'23'}:${'59'}:${'59'}`;
			},
			onClickedDate() {
				this.select2Day = false
				this.getDetail(this.startOfTime, this.endOfTime)

			},
			getAiListDes() {
				// 根据列表内容 去获取ai分析结果
				// 获取多个ai分析结果
				let that = this;
				// interval(5000).pipe(
				// 	concatMap(() => {
				// 		return getReleaseAiByList(that.aiList)
				// 	}),
				// 	retryWhen(errors => errors.pipe(
				// 		// 如果出现错误，继续请求
				// 		takeWhile((err) => {
				// 			// console.log("err-------------" + JSON.stringify(err));
				// 			if (err.status == 404) {
				// 				return false;
				// 			}
				// 			return true;
				// 		}),
				// 	)),
				// 	takeWhile((data) => {
				// 		// 根据数据结果，是否继续请求
				// 		return that.aiList.length > 0;
				// 	}),
				// ).subscribe(result => {
				// 	console.log("===" + JSON.stringify(result.data));
				// 	result.data.map(item => {
				// 		if (item.status === 1) {
				// 			// 如果获取到ai返回结果，请求一次刷新。
				// 			that.getObserveList();
				// 			that.$forceUpdate();
				// 		}
				// 	})
				// })
			},

			formatDateYMDHMS(dateStr) {
				return formatDateYMDHMS(dateStr)
			},
			selectTab(e) {
				this.currentTabidx = e;
			},
			isVideoUrl(url) {
				// 视频常见后缀名列表
				const videoExtensions = ['mp4', 'flv', 'avi', 'wmv', 'mov', 'mkv', 'rm', 'rmvb'];

				// 获取url的最后一部分（通常为文件名+后缀）
				const fileName = url.split('/').pop();

				// 分离出文件后缀名
				const fileExtension = fileName.split('.').pop().toLowerCase();

				// 判断后缀名是否在视频格式列表中
				return videoExtensions.includes(fileExtension);
			},
			copyBtn(item) {
				let _that = this;
				wx.setClipboardData({
					//复制文本
					data: item.fileUrl,
					success: function(res) {
						wx.showToast({
							title: '复制成功',
							icon: 'none',
							mask: 'true' //是否设置点击蒙版，防止点击穿透
						});
					}
				});
			},
			showTologin() {
				if (!this.hasLogin) {
					this.showRegister = true;
				}

			},
			confirm() {},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 确认去注册
			onClickRegister() {
				this.showRegister = false;
				uni.switchTab({
					url: "/pages/home/home"
				});

			},
			_login() {
				let _that = this;
				from(toLogin(res.data, "", "", ""))
					.subscribe({
						next: (result) => {
							console.log("-------------登录成功----------------" + JSON.stringify(result));
							/* 登录成功 */
							_that.updateState(result)
							// 方法二
							// this.$store.commit("updateState", {
							// 	hasLogin: true,
							// 	userInfo: res.userInfo,
							// });
							_that.getObserveList()
						},
						error: (err) => {
							console.error('An error occurred:', err);
							// 如果未注册，提示去注册。
							if (err.code === 401) {
								_that.showRegister = true;
							}
						},
						complete: () => {
							_that.loading = false
							console.log("-------------登录结束----------------");
							/* ... */
						}, // 不会执行，因为发生了错误	
					})


				// await this.login() // 登录
				// this.getObserveList()

				// getTeacherInfo().then(res => {
				// 	console.log("res: " + JSON.stringify(res.data.id));
				// 	if (res.data.id) {
				// 		uni.setStorageSync('userInfo', this.userInfo)
				// 	}
				// })
			},
			// 查看孩子档案
			onClickKidInfo(event) {
				console.log("event: " + JSON.stringify(event));
				if (event.status == 0) {
					// status:0/是，1/否。 是否自己创建的孩子， 不是不能进入详情。
					this.closeAll()
					uni.navigateTo({
						url: '/pages-sub/childFile/childFile?childid=' + event.childId
					});
				}
			},
			// 获取单个ai分析结果
			_getAiById() {
				getAiById().then(res => {})
			},
			onClickCell(event) {
				if (event == 1) {
					// 当前版本
					uni.navigateTo({
						url: '/pages/observe/shareCodeB'
					});

				} else if (event == 2) {
					// 当前版本

				} else if (event == 3) {
					// 后台下载
					localStorage.clear()

					// localStorage.removeItem("IS_MANGER")
					// localStorage.removeItem("TOKEN")
					// localStorage.removeItem("USER_INFO")
					// localStorage.removeItem("HASLOGIN")
					// 退出登录
					uni.navigateTo({
						url: '/pages/observe/loginView'
					});
				}
			},
			// 
			onClickDataInfo(event) {
				console.log("event: " + JSON.stringify(event));
				if (localStorage.getItem("IS_MANGER") == "1") {
					uni.navigateTo({
						url: '/pages/observe/dataDetails'
					});
				}
			},
			_getData() {
				// 加载数据
				this.is_load = true
				zip(total(""), detail("")).subscribe(([val1, val2]) => {
					this.loading = false
					console.log("============", val1, val2);
					this.total_income = val1.data.total_income;
					this.total_user = val1.data.total_user;
					this.push_num = val1.data.push_num;
					this.no_push_num = val1.data.no_push_num;

					this.yesterday_income = val1.data.yesterday_income;
					this.month_income = val1.data.month_income;

					this.s_push_num = val2.data.push_num;
					this.s_no_push_num = val2.data.no_push_num;
					this.new_user = val2.data.new_user;
					this.income = val2.data.income;

				})

				version("").then(res => {
					this.version = res.data.version
				}).catch(err => {

				})
			},
			handle() {
				// 消除ai分析已完成的提示
				this.assistantShow = false
			},
			deepClone(obj) {
				if (obj === null || typeof obj !== 'object') {
					return obj;
				}

				let clone = Array.isArray(obj) ? [] : {};

				for (let key in obj) {
					if (obj.hasOwnProperty(key)) {
						clone[key] = this.deepClone(obj[key]);
					}
				}

				return clone;
			},
			// 分享
			shareClick(item) {
				console.log("observe_shareshare ", item.id)

				this.observe = this.deepClone(item);
				this.observe.name = this.observe.name + "小朋友的观察";
				this.observe.path = "/pages-sub/share/share?observeid=" + item.id;
			},
			getObserveList() {
				let _that = this
				this.status === 'loading'
				observeList(_that.params).then(res => {
					setTimeout(() => {
						this.loading = false;
					}, 1000)
					let dataList = res.data.rows ? res.data.rows : []
					console.log("getObserveList", res);
					_that.total = res.data.total
					if (_that.params.pageNum == 1) {
						_that.tableList = dataList
					} else {
						_that.tableList = _that.tableList.concat(dataList)
					}
					// if (dataList.length < _that.params.pageSize) {
					// 	_that.status = 'noMore';
					// } else {
					// 	_that.status = 'more';
					// }

					_that.aiList = []
					for (let i = 0; i < _that.tableList.length; i++) {
						var item = _that.tableList[i]
						if (item.status == 2) {
							// ai生成中，需要轮询 请求获取ai生成结果
							_that.aiList.push(item.id)
						}
					}
					// 去重
					_that.aiList = [...new Set(_that.aiList)];
					_that.getAiListDes()

				})
			},
			// 
			closeAll() {
				this.showAll = false
			},
			// 
			openShowAll(val) {
				this.allList = val
				this.showAll = true
				console.log(this.showAll)
			},
			lookImg: function(val) {
				const urls = val[0].map(item => {
					return item.url
				})
				const current = val[1]
				console.log(urls);
				console.log(current);

				uni.previewImage({
					urls,
					current
				})
			},
			// 初始化日期
			initTime() {
				const time = new Date();
				//获得系统年份;
				const year = time.getFullYear();
				//获得系统月份;
				const month = time.getMonth() + 1;
				//获得系统当月分天数;
				const day = time.getDate();
				//获得系统星期几;
				let dayCycle = time.getDay();
				//使用数组更改日期样式;
				const dayCycleArray = ["日", "一", "二", "三", "四", "五", "六"];
				for (let i = 0; i < 7; i++) {
					if (dayCycle == i) {
						//将dayCycleArray的数赋值到系统星期几里面中去;
						dayCycle = dayCycleArray[i];
					}
				}
				this.dateStr = year + '/' + month + '/' + day + ' ';
				this.week = '星期' + dayCycle;
				this.nowMonth = month;
				this.nowDay = day;
				this.nowYear = year;
			},
			selectDate() {
				// if (!this.hasLogin) {
				// 	this.showRegister = true;
				// 	return
				// }
				this.selectDateShow = true;

			},
			// 格式化日期为 YYYY-MM-DD HH:mm:ss
			formatDate(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},

			// 选定日期， 筛选观察
			confirmDate(e) {
				// 取消弹窗
				this.selectDateShow = false;

				// 获取弹窗值
				let value = e.value[0].value;
				let name = e.value[0].name;

				// 临时变量
				let startOfday = ""
				let endOfday = ""
				// 获取时间
				if (value == "1") {
					this.nowYear = "昨日"

					// 获取昨天的日期对象
					const yesterday = new Date();
					yesterday.setDate(yesterday.getDate() - 1);

					// 昨天的起始时间 (00:00:00)
					const startOfYesterday = new Date(yesterday);
					startOfYesterday.setHours(0, 0, 0, 0);
					startOfday = this.formatDate(startOfYesterday);

					// 昨天的结束时间 (23:59:59)
					const endOfYesterday = new Date(yesterday);
					endOfYesterday.setHours(23, 59, 59, 999);
					endOfday = this.formatDate(endOfYesterday);

					this.getDetail(startOfday, endOfday)
				} else if (value == "2") {
					this.nowYear = "近七日"

					// 获取7天前的开始时间 (00:00:00)
					const sevenDaysAgoStart = new Date();
					sevenDaysAgoStart.setDate(sevenDaysAgoStart.getDate() - 7);
					sevenDaysAgoStart.setHours(0, 0, 0, 0);
					startOfday = this.formatDate(sevenDaysAgoStart);

					// 获取昨天的结束时间 (23:59:59)
					const yesterdayEnd = new Date();
					yesterdayEnd.setDate(yesterdayEnd.getDate() - 1);
					yesterdayEnd.setHours(23, 59, 59, 999);
					endOfday = this.formatDate(yesterdayEnd);

					this.getDetail(startOfday, endOfday)
				} else if (value == "3") {
					this.nowYear = "近30日"

					// 获取7天前的开始时间 (00:00:00)
					const sevenDaysAgoStart = new Date();
					sevenDaysAgoStart.setDate(sevenDaysAgoStart.getDate() - 30);
					sevenDaysAgoStart.setHours(0, 0, 0, 0);
					startOfday = this.formatDate(sevenDaysAgoStart);

					// 获取昨天的结束时间 (23:59:59)
					const yesterdayEnd = new Date();
					yesterdayEnd.setDate(yesterdayEnd.getDate() - 1);
					yesterdayEnd.setHours(23, 59, 59, 999);
					endOfday = this.formatDate(yesterdayEnd);

					this.getDetail(startOfday, endOfday)
				} else if (value == "4") {
					this.nowYear = "自定义"
					this.selectDateShow = false;
					this.select2Day = true;

				}

				console.log('开始时间:', startOfday);
				console.log('结束时间:', endOfday);

			},
			getDetail(start, end) {
				this.is_load = true
				const params = {
					"start": start,
					"end": end,
				};

				detail(params).then(res => {
					this.is_load = false

					this.s_push_num = res.data.push_num;
					this.s_no_push_num = res.data.no_push_num;

					this.new_user = res.data.new_user;
					this.income = res.data.income;
				}).catch(err => {
					this.is_load = false
				})
			},
			changeDate(e) {
				// console.log('changeDate收到值:', uni.$u.timeFormat(e.value, 'yyyy mm'));
				// changeSub.next(e)
			},

			// 删除观察
			handleDelete(id, idx) {
				let _that = this
				console.log(id, idx);
				this.delId = id;
				this.delIndex = idx;
				this.confirmShow = true

			},
			confirm() {
				console.log(this.delId, this.delIndex);
				let _that = this
				delObserve(this.delId).then(res => {
					console.log(res);
					console.log("res: " + JSON.stringify(res));
					if (res.code == 200) {
						_that.is_load = false
						_that.tableList.splice(_that.delIndex, 1)
						_that.confirmShow = false;
						_that.getObserveList()
					}
				}).catch(err => {
					_that.errMsg = "删除失败"
					_that.showWarn = true
				})
			},
			// 编辑当前观察记录
			handleEditObserve(item) {
				console.log("itemitem: " + JSON.stringify(item));
				uni.navigateTo({
					url: '/pages-sub/observeAdd/addObserve?type=update&item=' + encodeURIComponent(JSON.stringify(
						item))
				})
			},
			// 观察分析关闭事件
			handleAnalyzeClose(index) {
				let _that = this

				clearTimeout(this.timer)
				this.timer = null
				this.timer = setTimeout(() => {
					_that.tableList[index].expanded = false;
					_that.$forceUpdate();
				}, 300);
			},
			// 观赏分析展开事件
			handleAnalyzeOpen(index) {
				this.tableList[index].expanded = true;
				this.$forceUpdate();
			},
			// 新增观察记录
			handleAddObserve() {
				if (!this.hasLogin) {
					this.showRegister = true;
					return
				}
				if (this.currentTabidx == 0) {
					uni.navigateTo({
						url: '/pages-sub/observeAdd/addObserve?type=create'
					});
				} else {
					uni.navigateTo({
						url: '/pages-sub/addEval/addEval?type=create'
					});
				}
			},
			handleMouseDown(event) {
				this.dragging = true;
				this.mouseX = event.changedTouches[0].clientX;
				this.mouseY = event.changedTouches[0].clientY;
			},
			handleMouseMove(event) {
				if (this.dragging) {
					console.log("event", event);
					console.log("screenWidth", this.screenWidth);
					console.log("screenHeight", this.screenHeight);
					const deltaX = event.changedTouches[0].clientX - this.mouseX;
					const deltaY = event.changedTouches[0].clientY - this.mouseY;

					var left = this.left + deltaX;
					var top = this.top + deltaY;
					if (left <= 0) {
						this.left = 0
					} else if (left >= (this.screenWidth - 60)) {
						this.left = (this.screenWidth - 60)
					} else {
						this.left = left;
					}
					if (top <= 0) {
						this.top = 0
					} else if (top >= (this.screenHeight - 100)) {
						this.top = (this.screenHeight - 100)
					} else {
						this.top = top;
					}
					this.mouseX = event.changedTouches[0].clientX;
					this.mouseY = event.changedTouches[0].clientY;
				}
			},
			handleMouseUp(event) {
				console.log(event);
				this.dragging = false;
			},
		},
		onReachBottom() {
			uni.$emit('onReachBottom', null);
			if (this.is_load == false) {
				this.is_load = true
				return
			}

			if (this.tableList.length >= this.total) {
				this.status = 'noMore';
			} else {
				this.status = 'more';
				this.params.pageNum++
				this.getObserveList()
			}

		},
		onReady() {
			//  设置 top 时间，显示最新一条信息的时间
			setTimeout(() => {
				if (this.tableList.length > 0) {
					const query = uni.createSelectorQuery().in(this);
					query.selectAll('.table-list').boundingClientRect(data => {
						let temp = data[0].dataset.time.split(' ')[0].split('-')
						this.nowDay = temp[2]
						this.nowMonth = temp[1]
						this.nowYear = temp[0]
					}).exec();
				}
			}, 1000)

		},
		onPageScroll: function(e) {
			uni.$emit('onPageScroll', e);
			if (this.tableList.length > 0) {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.table-list').boundingClientRect(data => {
					for (let index = 0; index < data.length; index++) {
						if (data[index].top > 190 && data[index].top < 300) {
							let temp = data[index].dataset.time.split(' ')[0].split('-')
							this.nowDay = temp[2]
							this.nowMonth = temp[1]
							this.nowYear = temp[0]
							break
						};
					}
				}).exec();

			}
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.cell {
		width: 100%;
		height: 40px;

		.title {
			padding: 0px 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100%;
		}

		.arrow {
			width: 20px;
			height: 20px;
			position: absolute;
			right: 10px;
		}

		// <view class="cell" style="width: 100%;">
		// 	<view
		// 		style="padding: 0px 10px; display: flex;align-items: center;justify-content: space-between; width: 100%; height: 30px;">
		// 		<view>添加员工账号</view>
		// 		<view style="width: 20px; height: 20px; position: absolute;right: 0px;">
		// 			<image class="arrow-right"></image>
		// 		</view>

		// 	</view>
		// 	<view style="width: 100%; height: 1rpx; background-color: #FFF5F5F5;"></view>
		// </view>
	}

	// .arrow-right {
	// 	position: relative;
	// 	// width: 40px;
	// 	// height: 2px;
	// 	// background-color: #333;
	// }

	// .arrow-right::after {
	// 	content: '';
	// 	position: absolute;
	// 	right: 0;
	// 	top: -4px;
	// 	width: 10px;
	// 	height: 10px;
	// 	border-right: 2px solid #333;
	// 	border-top: 2px solid #333;
	// 	transform: rotate(45deg);
	// }

	.arrow-right {
		content: "";
		height: 20rpx;
		width: 20rpx;
		border-color: #99A1AF;
		border-style: solid;
		position: absolute;
		top: 10rpx;
		left: 8rpx;
		border-width: 4rpx 4rpx 0 0;
		transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	}

	.select-date {
		// margin-top: 32rpx;
		position: relative;
		padding-right: 45rpx;
		// flex: 1;

		&:before {
			content: '';
			width: 0;
			height: 0;
			position: absolute;
			right: 0;
			top: 3px;
			border-top: 10px solid #3A3D4B;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;
		}
	}

	.bgNum1 {
		// background-color: transparent;
		// background-image: url('../../static/icons/bg_card_num1.png');
		// background-size: cover;
		// /* 覆盖整个容器，可能裁剪图片 */
		// background-size: contain;
		// /* 完整显示图片，可能留白 */
		// background-size: 100% 100%;
		/* 拉伸填充容器 */
		// background-size: 100% auto;
		/* 指定宽度，高度自动 */
		// left: 20px;
		// top: 163px;
		width: 100%;
		height: 150px;
		opacity: 1;
		border-radius: 12px;
		background: linear-gradient(221.27deg, #FFFFFF 0%, #FFF5F8 9.78%, #FFF9F2 100%);
		backdrop-filter: blur(36px);

	}

	.bg_content {
		width: 100%;
		height: 120px;
		background-color: transparent;
		background-image: url('../../static/images/common/bg_content.png');
		background-size: cover;
		/* 覆盖整个容器，可能裁剪图片 */
		background-size: contain;
		/* 完整显示图片，可能留白 */
		background-size: 100% 100%;
		/* 拉伸填充容器 */
		// background-size: 100% auto;
		/* 指定宽度，高度自动 */
	}

	.bg_ad_content {
		width: 100%;
		height: 120px;
		background-color: transparent;
		background-image: url('../../static/images/common/bg_ad_content.png');
		background-size: cover;
		/* 覆盖整个容器，可能裁剪图片 */
		background-size: contain;
		/* 完整显示图片，可能留白 */
		background-size: 100% 100%;
		/* 拉伸填充容器 */
		// background-size: 100% auto;
		/* 指定宽度，高度自动 */
	}

	.observe-content {
		width: 100%;
		height: 100%;

		.listTop {
			display: flex;
			justify-content: space-between;

			.all {
				padding: 8rpx 20rpx;
				font-size: 24rpx;
				background-color: #EDEFF5;
				color: #43465C;
				border-radius: 20rpx;
				margin-left: 30rpx;
			}



			.listRight {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.share {
					border: none;
					color: #1CC367;
					padding: 5rpx 0 5rpx 5rpx;
					line-height: 12px;
					font-size: 14px;
					display: flex;
					align-items: center;
					justify-content: flex-end;

				}
			}
		}

		.showAll {
			.allNum {

				height: 50rpx;
				padding-left: 20rpx;
				padding-top: 10rpx;
			}

			// 全部弹窗
			.allList {
				margin-top: 20rpx;
				padding-left: 20rpx;

				width: 480rpx;
				max-height: 800rpx;
				overflow-y: scroll;




				.allListItem {
					display: flex;
					align-items: center;
					padding-bottom: 40rpx;
				}

				.itemName {
					font-size: 32rpx;
					color: #3A3D4B;
				}

				.itemImage {
					margin-right: 24rpx;
				}

				.itemAge {
					color: #77798D;
				}
			}
		}


		.topFixed {
			position: relative;
			z-index: 999;
			height: 104.12px;
			background-color: #9CED9C;

			.bg-image {
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				height: 104.12px;
				z-index: 999;
				background-image: url('../../static/images/observe/topIdx.png');
				background-size: 100%;
			}
		}

		.headerImg {
			width: 100%;
			position: fixed;
			z-index: 99;
		}

		.header {
			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 1;
			top: 0;
			background-color: #9CED9C;


			.header-bg {
				width: 100%;
				height: 100%;
			}

			.date {}

			.hierarchy-up {
				top: 17px;
				// position: absolute;
				// width: 100%;
				// z-index: 9;
			}

			.dateContent {
				width: 100%;
				position: absolute;
				z-index: inherit;
				top: 50%;
				transform: translateY(-50%);
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 80rpx 0 98rpx;
			}

			.circle-button {
				position: relative;
				width: 40rpx;
				height: 40rpx;
				border-radius: 100%;
				background-color: white;
				margin-left: 10rpx;

			}

			.new-btn {
				width: 196rpx;
				height: 72rpx;
				background: linear-gradient(180deg, #79EE88 0%, #58C866 100%);
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(25, 111, 56, 0.24), inset 0rpx 2rpx 6rpx 0rpx rgba(255, 255, 255, 0.5), inset 0rpx -2rpx 6rpx 0rpx rgba(255, 255, 255, 0.23);
				border-radius: 36rpx;

				display: flex;
				align-items: center;
				justify-content: center;

				.new-text {
					color: #fff;
					text-shadow: 0px 4px 8px rgba(25, 111, 56, 0.24);
				}

			}
		}

		.observe-body {
			padding: 20px 10px;
			width: 100%;
			height: 100%;

			background-color: #FFF5F5F5;

			.card {
				position: relative;
				margin-top: 20px;
				width: 100%;
				border-radius: 15px;
				/* 确保子元素也遵循圆角 */
				overflow: hidden;

				.bg {
					padding: 20px;
					background-color: white;
				}

				.title {
					font-weight: bold;

					.line {
						background: url('../../static/images/common/bg_line.png');
						width: 60px;
						height: 20px;
						background-repeat: no-repeat;
						background-size: 100%;
						margin-top: -10px;
					}
				}

				.content {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 50px;

					.num {
						font-size: 30px;
					}

					.unit {
						font-size: 16px;
					}
				}

				.icon {
					height: 100px;
					width: 100%;
					position: absolute;
					right: 0px;
					bottom: 0px;
				}
			}

			.sticky_container {
				background-color: white;
				padding: 10rpx 0 0 0;
				border-radius: 36rpx 36rpx 0 0;

				.tab {
					background-color: #fff;
					display: flex;
					align-items: center;
					margin: 10rpx 30rpx 0 30rpx;
					height: 80rpx;

					.highlight_tab {
						width: 128rpx;
						height: 60rpx;

						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;

						.text {
							font-size: 32rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							color: #3A3D4B;
							line-height: 44rpx;
						}

						.bottom_line {
							background-color: #58C866;
							width: 60rpx;
							height: 8rpx;
							border-radius: 4rpx;
						}

					}

					.normal_tab {
						width: 128rpx;
						height: 60rpx;

						display: flex;
						flex-direction: column;
						justify-content: center;
						justify-content: space-between;

						.text {
							font-size: 28rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #3A3D4B;
							line-height: 40rpx;
						}

					}

				}

				.date {
					background-color: #fff;
					height: 80rpx;
					padding: 0 32rpx;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.now-date {
						// margin-top: 32rpx;
						// flex: 1;
					}

					.select-date {
						// margin-top: 32rpx;
						position: relative;
						padding-right: 45rpx;
						// flex: 1;

						&:before {
							content: '';
							width: 0;
							height: 0;
							position: absolute;
							right: 0;
							top: 15rpx;
							border-top: 15rpx solid #3A3D4B;
							border-left: 15rpx solid transparent;
							border-right: 15rpx solid transparent;
						}
					}
				}


			}



			// .u-picker.data-v-f45a262e {
			// 	padding-bottom: 112rpx;
			// }

			// .u-picker__view.data-v-f45a262e {
			// 	border-bottom: 2rpx solid #000;
			// }

			// .u-toolbar__cancel__wrapper {
			// 	position: absolute;
			// 	color: #3A3D4B;
			// 	left: 115rpx;
			// 	bottom: 32rpx;
			// }

			// .u-toolbar__confirm__wrapper {
			// 	position: absolute;
			// 	right: 115rpx;
			// 	bottom: 32rpx;
			// }

			// .u-popup__content.data-v-3a231fda {
			// 	border-radius: 24rpx 24rpx 0 0;
			// 	overflow: hidden;
			// }

			.table-list {
				margin-top: 40rpx;
				padding: 0 32rpx;
				display: flex;
			}

			.avatar {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				overflow: hidden;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.avatarMul {
				display: flex;
				align-items: center;
				width: 88rpx;
				height: 88rpx;
				border-radius: 10rpx;
				background-color: #EDEFF5;
				flex-wrap: wrap;
				overflow: hidden;

				.avatarImg {
					width: 24rpx;
					height: 24rpx;
					margin: 2rpx;
				}
			}

			.details {
				width: 580rpx;
				margin-left: 20rpx;

				.content {
					margin-top: 20rpx;
					width: calc(100vw - 170rpx);
					word-wrap: break-word;
				}
			}

			.image {
				margin-top: 20rpx;

				image {
					width: 480rpx;
					height: 280rpx;
					border-radius: 10rpx;
				}
			}

			.year-month {
				color: #99A1AF;
			}

			.time {
				margin-left: 15rpx;
				color: #99A1AF;
			}

			.delete {
				margin-left: 30rpx;
				cursor: pointer;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.edit {
				margin-left: 50rpx;
				cursor: pointer;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.analyze {
				position: relative;
				background-color: #FAF9E5;

				.u-collapse {
					background-color: #FAF9E5;
					border-radius: 8rpx;
				}

				.u-collapse-item {
					width: calc(100vw - 170rpx);
					word-wrap: break-word;
				}

				// 标题head
				.u-cell__body {
					height: 80rpx;
					padding: 20rpx !important;
				}

				.u-cell__title-text {
					font-size: 28rpx !important;
					color: #3A3D4B !important;
					font-weight: 600;
					padding-left: 42rpx;
					line-height: 40rpx !important;
				}

				.u-cell__value {
					font-size: 26rpx;
					color: #000;
				}

				// 展开箭头
				.u-icon__icon--info {
					color: #000000 !important;
					font-weight: bold !important;
					font-size: 30rpx !important;
				}

				.analyze-icon {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					left: 20rpx;
					top: 22rpx;
				}

				.analyze-title-bottom {
					width: 126rpx;
					height: 15rpx;
					position: absolute;
					left: 65rpx;
					top: 52rpx;
				}

				.order {
					width: 10rpx;
					height: 10rpx;
					background-color: #3a3d4b;
					border-radius: 50%;
					margin-top: 15rpx;
				}

				.text {
					width: 448rpx;
					margin-left: 10rpx;
					color: #3A3D4B;
				}

				.u-collapse-item__content__text {
					padding: 0 28rpx 28rpx;
					color: #3A3D4B;
				}

				.showAllIN {
					height: auto;
				}

				.hidetext {

					-webkit-line-clamp: 4;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
			}
		}

		.delete-popup {
			.u-popup__content {
				width: 480rpx;
				height: 332rpx;
				border-radius: 20rpx;

				.success-icon {
					display: block;
					width: 128rpx;
					height: 128rpx;
					margin: 48rpx auto 0;
				}

				.success-tips {
					display: block;
					text-align: center;
					margin-top: 10rpx;
				}

				.success-text {
					display: block;
					text-align: center;
					color: #77798D;
					margin-top: 10rpx;
				}

				.u-icon__icon {
					color: #3d3d3d;
				}
			}
		}
	}

	.save-popup {
		.u-popup__content {
			width: 480rpx;
			height: 332rpx;
			border-radius: 20rpx;

			.success-icon {
				display: block;
				width: 128rpx;
				height: 128rpx;
				margin: 48rpx auto 0;
			}

			.success-tips {
				display: block;
				text-align: center;
				margin-top: 10rpx;
			}

			.success-text {
				display: block;
				text-align: center;
				color: #77798D;
				margin-top: 10rpx;
			}

			.save-btn {
				.u-button--square {
					width: 300rpx;
					height: 80rpx;
					border: none;
					border-radius: 40rpx;
					background-color: #58C866;
				}

				.u-button__text {
					font-size: 16px;
					font-weight: bold;
					color: #fff;
				}
			}
		}
	}

	.add {
		position: fixed;
		right: 20px;
		bottom: 40px;
		z-index: 999;

		width: 108rpx;
		height: 108rpx;

		cursor: move;
		user-select: none;
	}

	.item-content {
		display: flex;
		align-items: center;
		margin: 20rpx 0;

		.left-content {
			color: #77798d;
			font-size: 14px;
			width: 100px;
			white-space: nowrap;
		}

		.right-content {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			flex: 1;

			.text {
				flex: 1;
				text-align: left;

				max-width: 300rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.icon {
				width: 30rpx;
				height: 30rpx;
				margin: 0rpx 20rpx;
			}
		}

		.flex {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			color: #3a3d4b;
		}
	}

	.popup {
		// position: relative;

		.u-popup__content {
			// position: relative;
			border-radius: 24rpx 24rpx 0 0;
			// overflow: hidden;
			padding-bottom: 100rpx;

		}

		// .u-picker__view {
		// 	height: 360rpx !important;
		// }


		.u-toolbar__wrapper__cancel {
			padding: 0;
			position: absolute;
			left: 100rpx;
			bottom: -78rpx;

			width: 200rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.u-toolbar__wrapper__confirm {
			padding: 0;
			position: absolute;
			right: 100rpx;
			bottom: -78rpx;

			width: 200rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}



	.picker-view {
		width: 100%;
		height: 400rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.picker-btn {
		display: flex;
		margin-top: 40rpx;
		margin-bottom: 40rpx;

		.btn {
			flex: 1;
			width: 200rpx;
			height: 72rpx;
			// color: #58C866;
			// background: #FFFFFF;
			// border-radius: 36rpx;
			// border: 2rpx solid #58C866;
			text-align: center;
			line-height: 72rpx;
			margin: 0 10rpx;
		}

		.confirm {
			color: #58C866;
			// color: #fff;
		}
	}
</style>